/*
  @mixin 定义可复用的样式块。语法：@mixin <name>{...} | @mixin name(<arguments...>){...}
  @include 使用 @mixin 定义的样式块。语法：@include <name> | @include name(<arguments...>)
*/
@use "sass:meta";


// 无参
@mixin border-bottom {
  border-bottom: 1px solid;
}

// 有参
@mixin border-top ($borderWidth) {
  border-top: $borderWidth solid;
}

// 有参，默认值
@mixin border-left ($borderWidth: 3px) {
  border-left: $borderWidth solid;
}

// 关键字参数
@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

// 任意参数
@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

// 任意关键字参数
@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

// 内容块
@mixin hover {
  &:not([disabled]):hover {
    @content
  }
};

// 内容块含参数 @include <name> using (<arguments...>)
@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type)
    }
  }
}

h1 {
  @include border-bottom
}

h2 {
  @include border-top(2px)
}

h3 {
  @include border-left()
}

.sidebar {
  @include rtl(float, left, right);
}

@include order(150px, 'input.name', 'input.address', 'input.zip');
$form-selectors: "input.name", "input.address", "input.zip" !default;
@include order(150px, $form-selectors...);

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
);

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}

@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}